<!--  -->
<template>
  <div class="flex warp margin-top-15">
    <div class="box flex-column" :style="getStyle(item, i)" v-for="(item, i) in TableData" :key="i" @click="$emit('click', item)">
      <div class="title one-line-ellipsis">{{ item.name || item.parkName || item.locationDesc }}</div>
      <div class="font-size-16 padding-bottom-15 padding-top-10">指导月租金：{{ item.rentGuidePrice || '--' }}元/天</div>
      <div v-if="item.adImg || item.parkImg" class="img-box">
        <img v-if="item.adImg || item.parkImg" :src="item.adImg || item.parkImg" class="item-img" />
      </div>
      <el-empty v-else class="item-img flex-1" :image-size="100">
        <div slot="description"></div>
      </el-empty>
    </div>
  </div>
</template>
<script>
  export default {
    data() {
      return {};
    },

    props: {
      TableData: {
        type: Array,
        default: [],
      },
      pageSize: {
        type: String,
        default: '',
      },
    },

    methods: {
      getStyle(item, index) {
        let str = '';
        if (item.color) {
          str += ' background-color: ' + item.color + '; ';
        }
        if (this.pageSize == 's') {
          if ((index + 1) % 4 != 0) {
            str += 'margin-right: 1%;';
          }
        } else if (this.pageSize == 'm') {
          if ((index + 1) % 5 != 0) {
            str += 'margin-right: 1%;';
          }
        }
        return str;
      },
    },

    mounted() {},
  };
</script>
<style scoped lang="scss">
  .box {
    height: 280px;
    border-radius: 6px;
    border: 1px solid #f1f1f1;
    position: relative;
    cursor: pointer;
    padding: 20px;
    margin-bottom: 15px;
    .title{
      font-size: 22px;
    }
    .img-box {
      width: 100%;
      height: 168px;
    }
  }
  .item-img {
    width: 100%;
    height: 168px;
  }
  @media only screen and (max-width: 1450px) {
    .box {
      width: 24.24%;
    }
  }
  @media only screen and (min-width: 1450px) {
    .box {
      width: 19.15%;
    }
  }
</style>
